<template>
  <div id="login">
    <div class="wrapper">
        <header class="header">
            <img class="logo" src="~Public/img/logo.png" alt="">
            <h1 class="title">昆明新机场高速巡查管理系统</h1>
        </header>
      <div class="form">
        <div class="row">
          <el-input v-model="username" placeholder="请输入账号" prefix-icon="iconfont icon-zhanghao"></el-input>
        </div>
        <div class="row">
          <el-input type="password" v-model="password" placeholder="请输入密码" prefix-icon="iconfont icon-mima"></el-input>
        </div>
        <div class="row row3">
          <el-button type="primary" @click="login" :loading="loading" >登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { throws } from 'assert';
import Md5 from 'js-md5'
export default {
  data () {
    return {
      username:"",
      password:"",
      loading:false,
    }
  },
  methods:{
    login(){
      var bool=this.validator();
      if(!bool){return}
      
      var subumitData={
        username:this.username,
        password:Md5(this.password)
		//password:this.password
      }
      this.loading=true
      this.$http.login(subumitData)
      .then((res)=>{
          var data=res.data.data
          this.$store.commit("setUser",data)
		  localStorage.setItem("tokenId",data.token)
          this.getUserPms()//请求权限
      }).catch((err)=>{
        this.loading=false
        if(err.data && err.data.msg){
            window.message.close()
            this.$message({
                type: 'error',
                message: err.data.msg,
                showClose: true,
            })
        }else{
          window.message.close()
            this.$message({
              type: 'error',
              message: '网络出错,无法登录!',
              showClose: true,
          })
        }
        throw(err)
      })
    },
    
    validator(){
      if(!this.username){
          this.$message.warning("请输入账号")
          return false
      }else if(!this.password){
        this.$message.warning("请输入密码")
          return false
      }else if(this.password.length<5){
        this.$message.warning("密码不能少于6位")
          return false
      }
    	return true
    },
	
	getUserPms(){
		this.$http.getUserPms()
		.then((res)=>{
			var data=res.data.data ||[];
			this.loading=false
			if(data.length==0){
				this.$message.warning("该用户无任何权限!")
				return
			}
			var codeList=[];
			this.travers(data,codeList)
			localStorage.setItem("permission",codeList)
			this.$store.commit("setPermission",codeList)
			this.$router.push("/onepage")
			
		}).catch((err)=>{
			this.loading=false
			throw(err)
		})
	},


    //对象遍历-收集obj所有code
    travers(obj,idList){
      if(!obj || !obj instanceof Object){
        return
      }
      if(Object.prototype.toString.call(obj)==="[object Array]"){
          if(obj.length===0){
              return
          }
          obj.forEach((item)=>{
              this.travers(item,idList)
          })
      }else if(Object.prototype.toString.call(obj)==="[object Object]"){
		  idList.push(obj.code)
          if(obj.children && obj.children instanceof Array){
              obj.children.forEach((item)=>{
                  this.travers(item,idList)
              })
            }else{
                return
            }
      }
    }
  },

  created(){
    localStorage.clear()
  }
}
</script>
<style scoped lang="scss">
//@import "../assets/style/test.scss";
#login{
	background: url(~Public/img/login-bg1.jpg) no-repeat;
	background-size: cover;
}
.header{
  display: flex;
  justify-content: center;
  align-content: center;
  align-items:center;
  position: relative;
  top: 100px;
  z-index: 2;
  .logo{
    color: #fff;
    width: 100px;
    height: 100px;
    margin-right: 20px;

  }
  .title{
    color: #fff;
    font-family: "楷体";
	font-size: 47px;
  }

}

.wrapper{
  width: 100vw;
  height:100vh;
  //background: url(/static/bg-login.jpg) no-repeat 0px 0px;
  background-size: 100% 100%;
  position:relative;
}

.form{
  width: 400px;
  height: 250px;
  border-radius: 20px;
  position: absolute;
  top: 15%;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
  // border: 1px solid #fff;
  padding: 10px 20px;
  padding-top: 19px;
  box-sizing: border-box;
  z-index: 1;
  background-color: rgba(0,0,0,0.3);
  .row{
    display: flex;
    flex-wrap: nowrap;
    align-items:center;
    margin: 27px 0px;
    .iconfont{
      margin-right: 10px;
      text-align: right;
      color:#fff;
    }
  }
  .row3{
    .el-button{
      width: 100%;
      font-size: 18px;
    }
  }
  
  /deep/ .el-input{
    flex: 1;
    .el-input__inner{
    	//border:1px solid rgba(255, 255, 255, 0.35);
      height: 0;
      padding: 20px 10px 20px 30px;
      background-clip: content-box;
      background-color:transparent;
      color: #fff;
    }
    
    .el-input__inner::first-line{
      color: #fff
    }
	 
    .el-input__prefix{
  	  font-weight: bolder;
	  transition: none;
	  color: #fff;
    }
	.el-input__inner:focus + .el-input__prefix{
		color:#409eff;
	}
	
  }

}
//区分出ie
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)  {
	   /deep/ .el-input__inner{
		   height:40px !important;
	        padding:0px 15px 0px 30px !important;
	    }
	}
</style>

